<template>
  <div>
    <div
      class='item'
      v-for='(item,index) of list'
      :key='index'
    >
      <div class='item-title'>
        <span class='iconfont item-icon'>&#xe662;</span>
          {{item.title}}
      </div>
      <div v-if='item.children'>
        <detail-list
          :list='item.children'
          class='item-children'
        ></detail-list>
      </div>
    </div>
  </div>
</template>

<script>
export default{
  name: 'DetailList',
  props: {
    list: Array
  }
}
</script>

<style lang = 'stylus' scoped>
  @import '~styles/varibles.styl'
  .item
    line-height: 0.8rem;
    font-size: .3rem;
    .item-title
      padding:.1rem
      .item-icon
        color: $bgColor
    .item-children
      padding: 0 .3rem
</style>
